<template>
	<view class="goodslist-page">
		<view class="goods-list">
			<block v-for="goods in goodsList" :key="goods.goods_id">
				<goods-item :item="goods" @onGoodsItemClicked="onGoodsItemClicked(goods)"></goods-item>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsListAPI
	} from '../../service/goodslist_api.js'

	import GoodsItem from '../../components/GoodsItem/GoodsItem.vue'



	export default {
		data() {
			return {
				query: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 8,
				},
				goodsList: [],
				total: 0,
				isLoading: false
			}
		},
		components: {
			GoodsItem
		},
		methods: {
			async getGoodsList(callback) {
				this.isLoading = true
				const res = await getGoodsListAPI(this.query)
				callback && callback()
				if (res.meta.status === 200) {
					this.goodsList = [...this.goodsList, ...res.message.goods]
					this.total = res.message.total
				} else {
					uni.$showMsg()
				}
				this.isLoading = false
			},
			onGoodsItemClicked(item) {
				uni.navigateTo({
					url: '/subpkg/goods-detail/goods-detail?goods_id=' + item.goods_id
				})
			}
		},
		onLoad(option) {
			this.query.query = option.query || ''
			this.query.cid = option.cid || ''
			this.getGoodsList()

		},
		onReachBottom() {
			if (!this.isLoading) {
				const hasMore = (this.query.pagenum * this.query.pagesize <= this.total)
				this.query.pagenum += 1
				if (hasMore) {
					this.getGoodsList()
				} else {
					uni.$showMsg('我是有底线的!')
				}
			}

		},
		onPullDownRefresh() {
			this.isLoading = false
			this.query.pagenum = 1
			this.total = 0
			this.goodsList = []
			this.getGoodsList(() => uni.stopPullDownRefresh())
		}
	}
</script>

<style lang="scss">
	.goods-list {
		padding: 16rpx;
	}
</style>
